require('./Map.styl');

import {Boxs, Toast} from 'saltui';
import Icon from 'salt-icon'

const HBox = Boxs.HBox;
const Box = Boxs.Box;

class Page extends React.Component {


  constructor(props) {
    super(props);

  }

  onMapClick() {
    let t = this;
    if (!this.props.readOnly) {
      Toast.show({
        type: 'loading',
        content: '加载中...',
        autoHide: false,
        hasMask: true,
      });

      dd.device.geolocation.get({
        targetAccuracy: 200,
        coordinate: 1,
        withReGeocode: Boolean,
        onSuccess: function (result) {
          Toast.hide(function () {
          });
          dd.biz.map.search({
            latitude: result.latitude, // 纬度
            longitude: result.longitude, // 经度
            scope: 800, // 限制搜索POI的范围；设备位置为中心，scope为搜索半径
            onSuccess: function (result) {
              t.props.onMapSelect(result);
            },
            onFail: function (err) {
              console.log(err);
              Toast.hide(function () {
                alert('调用钉钉地图定位接口错误:' + JSON.stringify(err));
              });

            }
          });
        },
        onFail: function (err) {
          console.log(err);
          Toast.hide(function () {
            alert('调用钉钉获取地理位置接口错误:' + JSON.stringify(err));
          });
        }
      });
    } else {
      dd.biz.map.view({
        latitude: t.props.map.latitude, // 纬度
        longitude: t.props.map.longitude, // 经度
        title: t.props.map.title, // 地址/POI名称

        onFail: function (err) {
          console.log(err);
          Toast.hide(function () {
            alert('调用钉钉查看地理位置接口错误:' + JSON.stringify(err));
          });
        }

      });
    }
  }

  render() {
    return (
      <div className="map">
        <div onClick={this.onMapClick.bind(this)}>
          <HBox>
            <Box><Icon name="map" fill="#BDBDBD" height={20} width={20}/></Box>
            <Box><span
              style={{color: '#333'}}>{!this.props.map || !this.props.map.title ? '获取位置' : this.props.map.title}</span></Box>
          </HBox>
        </div>

      </div>
    );
  }
}

Map.contextTypes = {
  map: React.PropTypes.object,
  readOnly: React.PropTypes.bool,
  onMapSelect: React.PropTypes.func,
};

module.exports = Page;
